<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script>
    <script>
        window.onload = function () {
            window.addEventListener("scroll", function () {
                var searchWrap = document.querySelector(".search-wrap");
                console.log(window.pageYOffset);
                if (window.pageYOffset > 0) {
                    searchWrap.style.top = '0px';
                } else {
                    searchWrap.style.top = '45px';
                }
            });

            var swiper = new Swiper(".mySwiper", {
                pagination: {
                    el: ".swiper-pagination",
                },
                loop: true,
                autoplay: true,
                effect: 'cards',
            });


        }
    </script>
</head>

<body>
    <!-- 我们在开发移动端页面的时候，首先不能像PC端页面一样
        布局上宽度写死，因为移动端设备手机屏幕碎片化太严重，
        我们目前这个jd项目，我们采取流式布局（百分比布局），
        百分比布局只关注宽度，不关注高度（高度还是写死的），
        因为百分比布局对于高度是无能为力的
    -->
    <!-- header开始 -->
    <div class="header">
        <div class="close">
            <img src="./imgs/close.png" alt="">
        </div>
        <div class="jd-icon"><img src="./imgs/jd-icon.png" alt=""></div>
        <div class="open-app">打开京东App，购物更轻松</div>
        <div class="open-btn">立即打开</div>
    </div>
    <!-- header结束 -->
    <!-- 搜索条条开始 -->
    <div class="search-wrap clearfix">
        <div class="menu">
            <img src="./imgs/menu.png" alt="">
        </div>
        <div class="search">
            <span class="search-jdicon"></span>
            <span class="fdj"></span>
            <input type="search" placeholder="冬冬真帅">
        </div>
        <div class="login">登录</div>
    </div>
    <!-- 搜索条条结束 -->
    <div class="banenr">
        <div class="banner-gb"></div>
        <div class="banner-ad">
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/173778/37/30272/89540/633109abE3b9ca791/1db6cf88f6ce4aab.jpg!cr_1053x420_4_0!q70.jpg"
                            alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/173778/37/30272/89540/633109abE3b9ca791/1db6cf88f6ce4aab.jpg!cr_1053x420_4_0!q70.jpg"
                            alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/173778/37/30272/89540/633109abE3b9ca791/1db6cf88f6ce4aab.jpg!cr_1053x420_4_0!q70.jpg"
                            alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/173778/37/30272/89540/633109abE3b9ca791/1db6cf88f6ce4aab.jpg!cr_1053x420_4_0!q70.jpg"
                            alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/173778/37/30272/89540/633109abE3b9ca791/1db6cf88f6ce4aab.jpg!cr_1053x420_4_0!q70.jpg"
                            alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/173778/37/30272/89540/633109abE3b9ca791/1db6cf88f6ce4aab.jpg!cr_1053x420_4_0!q70.jpg"
                            alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/173778/37/30272/89540/633109abE3b9ca791/1db6cf88f6ce4aab.jpg!cr_1053x420_4_0!q70.jpg"
                            alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/173778/37/30272/89540/633109abE3b9ca791/1db6cf88f6ce4aab.jpg!cr_1053x420_4_0!q70.jpg"
                            alt="">
                    </div>

                </div>
                <div class="swiper-pagination"></div>
            </div>
            <!-- <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/173778/37/30272/89540/633109abE3b9ca791/1db6cf88f6ce4aab.jpg!cr_1053x420_4_0!q70.jpg"
                alt=""> -->
        </div>
    </div>
</body>

</html>